<template>
  <div id="app">
    <div class="container">
      <!-- 创建一个canvas画布 npmn-js是通过canvas实现绘图的，并设置ref让vue获取到element -->
      <div class="bpmn-container">
        <div class="bpmn-canvas" ref="canvas"></div>
        <!-- 工具栏显示的地方 -->
        <div class="bpmn-js-properties-panel" id="js-properties-panel"></div>
      </div>
    </div>
  </div>
</template>

<script>
import BpmnModeler from "bpmn-js/lib/Modeler";

import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css'
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,

  // use Camunda Platform properties provider
  CamundaPlatformPropertiesProviderModule
} from 'bpmn-js-properties-panel';


// use Camunda BPMN namespace
import camundaModdleDescriptors from 'camunda-bpmn-moddle/resources/camunda.json';

// 汉化
// import customTranslate from "./translate/customTranslate";

export default {
  name: "CamundaBpmnModeler", data() {
    return {
      bpmnModeler: null,
      canvas: null,
      bpmnTemplate: `
             <?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:camunda="http://camunda.org/schema/1.0/bpmn"
id="Definitions_0ibdjqm"
targetNamespace="http://bpmn.io/schema/bpmn"
xmlns:modeler="http://camunda.org/schema/modeler/1.0" exporter="Camunda Modeler"
exporterVersion="5.17.0" modeler:executionPlatform="Camunda Platform"
modeler:executionPlatformVersion="7.20.0">
  <bpmn:process id="Process_04oft8y" isExecutable="true" camunda:historyTimeToLive="180">
    <bpmn:startEvent id="StartEvent_1" />
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_04oft8y">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="179" y="159" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>

        `,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      // 获取画布 element
      this.canvas = this.$refs.canvas;

      // 将汉化包装成一个模块
      // const customTranslateModule = {
      //   translate: ["value", customTranslate],
      // };

      // 创建Bpmn对象
      this.bpmnModeler = new BpmnModeler({
        // 设置bpmn的绘图容器为上门获取的画布 element
        container: this.canvas,

        // 加入工具栏支持
        propertiesPanel: {
          parent: "#js-properties-panel",
        },
        additionalModules: [
          BpmnPropertiesPanelModule,
          BpmnPropertiesProviderModule,
          CamundaPlatformPropertiesProviderModule,
          // customTranslateModule
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptors
        }
      });

      await this.createNewDiagram(this.bpmnTemplate);
    },
    async createNewDiagram(bpmn) {
      // 将字符串转换成图显示出来;
      this.bpmnModeler.importXML(bpmn, (err) => {
        if (err) {
          this.$Message.error("打开模型出错,请确认该模型符合Bpmn2.0规范");
        }
      });
    },
  },
};
</script>

<style>
.bpmn-container {
  width: 100%;
  height: 80vh;
  display: flex;
  background: #fff;
}

.bpmn-canvas {
  width: calc(100% - 300px);
  height: 80vh;
}

.bpmn-js-properties-panel {
  width: 320px;
  height: inherit;
  overflow-y: auto;
}

.bjs-powered-by {
  display: none;
}
</style>
